<template>
	<Page>
		<Topbar active="主菜单" />
		<Content>
			<Panel column style="padding: 4rem 2rem;">
				<u-grid :border="false" col="4">
					<u-grid-item v-for="(item, index) in list" :key="index" v-if="$has(item.btnCode)"
						@click="click(item)">
						<view class="menu" :style="{
                                backgroundColor: item.backgroundColor,
                                borderColor: item.borderColor
                            }">
							<u-icon class="icon" :name="item.name" size="6rem" :color="item.iconColor"></u-icon>
							<text class="grid-text" :style="{
                                    color: item.fontColor
                                }">{{item.title}}</text>
						</view>
					</u-grid-item>
				</u-grid>
			</Panel>
		</Content>
	</Page>
</template>

<script>
	import Page from "@/components/page/index.vue";
	import Topbar from "@/components/topbar/index.vue";
	import Content from "@/components/content/index.vue";
	import Panel from "@/components/panel/index.vue";
	import Tabs from "@/components/tabs/index";
	import fetch from "@/utils/fetch";
	export default {
		components: {
			Page,
			Topbar,
			Content,
			Panel,
			Tabs
		},
		data() {
			return {
				tabs: [{
					label: '生产管理',
					value: '生产管理'
				}],
				active: {
					label: '生产管理',
					value: '生产管理'
				},
				list: [{
						name: 'star',
						title: '车间生产',
						iconColor: '#2168d2',
						fontColor: '#666',
						backgroundColor: '#f5f8fd',
						borderColor: '#e3ecfe',
						btnCode: 'productionBtn',
						path: '/pages/workbench/production/index',
					}, {
						name: 'star',
						title: '生产管理',
						iconColor: '#2168d2',
						fontColor: '#666',
						backgroundColor: '#f5f8fd',
						borderColor: '#e3ecfe',
						btnCode: 'productionBtnNew',
						path: '/pages/workbench/productionNew/index',
					},
					{
						name: 'star',
						title: '自检报废',
						iconColor: '#e35735',
						fontColor: '#e35735',
						backgroundColor: '#fef4f2',
						borderColor: '#fce3df',
						btnCode: 'Selfinspectionscrapping',
						path: '/pages/workbench/inspect/index',
					},
					{
						name: 'star',
						title: '异常停机',
						iconColor: '#e35735',
						fontColor: '#e35735',
						backgroundColor: '#fef4f2',
						borderColor: '#fce3df',
						btnCode: 'Abnormalshutdown',
						path: '/pages/workbench/shutdown/index',
					},
					{
						name: 'star',
						title: '物料操作',
						iconColor: '#2168d2',
						fontColor: '#666',
						backgroundColor: '#f5f8fd',
						borderColor: '#e3ecfe',
						btnCode: 'materialshandling',
						path: '/pages/workbench/material/index',
					},
					{
						name: 'star',
						title: '生产提报',
						iconColor: '#2168d2',
						fontColor: '#666',
						backgroundColor: '#f5f8fd',
						borderColor: '#e3ecfe',
						btnCode: 'Productionreporting',
						path: '/pages/workbench/report/index',
					},
					{
						name: 'star',
						title: '停机原因补录',
						iconColor: '#2168d2',
						fontColor: '#666',
						backgroundColor: '#f5f8fd',
						borderColor: '#e3ecfe',
						btnCode: 'Additionalrecordingofshutdownreasons',
						path: '/pages/workbench/reason/index',
					},
					{
						name: 'star',
						title: 'SOP查看',
						iconColor: '#2168d2',
						fontColor: '#666',
						backgroundColor: '#f5f8fd',
						borderColor: '#e3ecfe',
						btnCode: 'SOPView',
						path: '/pages/workbench/sop/index',
					},
					{
						name: 'star',
						title: '返工执行',
						iconColor: '#2168d2',
						fontColor: '#666',
						backgroundColor: '#f5f8fd',
						borderColor: '#e3ecfe',
						btnCode: 'Reworkexecution',
						path: '/pages/workbench/rework/index',
					},
					{
						name: 'star',
						title: '不良品处理',
						iconColor: '#2168d2',
						fontColor: '#666',
						backgroundColor: '#f5f8fd',
						borderColor: '#e3ecfe',
						btnCode: 'Defectiveproducthandling',
						path: '/pages/workbench/bad/index',
					},
					{
						name: 'star',
						title: '清线',
						iconColor: '#2168d2',
						fontColor: '#666',
						backgroundColor: '#f5f8fd',
						borderColor: '#e3ecfe',
						btnCode: 'Clearline',
						path: '/pages/workbench/clear/index',
					},
					// {
					//     name: 'star',
					//     title: 'Form表单示例',
					//     iconColor: '#2168d2',
					//     fontColor: '#666',
					//     backgroundColor: '#f5f8fd',
					//     borderColor: '#e3ecfe',
					//     path: '/pages/workbench/form-demo/index',
					// },
					// {
					//     name: 'star',
					//     title: 'Table示例',
					//     iconColor: '#2168d2',
					//     fontColor: '#666',
					//     backgroundColor: '#f5f8fd',
					//     borderColor: '#e3ecfe',
					//     path: '/pages/workbench/table-demo/index',
					// },
					// {
					//     name: 'star',
					//     title: 'Tab示例',
					//     iconColor: '#2168d2',
					//     fontColor: '#666',
					//     backgroundColor: '#f5f8fd',
					//     borderColor: '#e3ecfe',
					//     path: '/pages/workbench/tab-demo/index',
					// },
					// {
					//     name: 'star',
					//     title: 'CheckboxPanelGroup示例',
					//     iconColor: '#2168d2',
					//     fontColor: '#666',
					//     backgroundColor: '#f5f8fd',
					//     borderColor: '#e3ecfe',
					//     path: '/pages/workbench/checkbox-panel-group-demo/index',
					// }
				]
			}
		},
		computed: {},
		methods: {
			click(item) {
				uni.navigateTo({
					url: item.path,
					animationType: "pop-in",
					animationDuration: 1000,
				});
			}
		},
		//      beforeMount() {
		// fetch('get', '/basic/menu/findPermissionByToken').then(res => {
		//     setMenu(res)
		// });
		//      }
	};
</script>

<style scoped lang="scss">
	.menu {
		border: 1px solid;
		border-radius: 2rem;
		font-size: 2.5rem;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		width: 90%;
		padding: 4.5rem 0;
		margin: 0 -3rem 3rem -3rem;

		.grid-text {
			margin-top: 1.5rem;
			font-weight: bold;
		}
	}
</style>